<template>
  <van-tabs v-model:active="active">
    <van-tab v-for="(item, index) in title" :title="item" :key="index">
      <ListView :typeList="typeList[index]" page="home">
        <template v-slot:son="list">
           <div class="itemBox" v-for="(item) in list.son as any" :key="item.id" @click="goDetail(item.id)">
              <img class="img" :src="item.cover_url" fit="contain"/>
              <p class="title">{{item.title}}</p>
              <p class="description">
                <span class="price">￥{{item.price}}</span>
                <van-icon class="like" name="star-o" /> <span>{{item.collects_count}}</span>
              </p>
           </div>
        </template>
      </ListView>
    </van-tab>
  </van-tabs>
</template>

<script lang="ts" setup>
import ListView from '@/components/List/IndexView.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const active = ref(0)
const title = ref(['畅销', '新书', '精选'])
const typeList = ref(['sales', 'new', 'recommend'])

// 跳转详情页
const goDetail = (id: number) => {
  router.push({ path: '/detail', query: { id: id, fromPath: 'home' } })
}
</script>

<style lang="scss" scoped>
::v-deep .van-tabs__wrap{margin-bottom: 10px;}
::v-deep .van-tab__text{font-size: 15px}

.itemBox{
  width: 32%;
  display: inline-block;
  margin-left: 1%;
  font-size: 12px;
  margin-bottom: 16px;
  &:last-child{
    margin-bottom: 0;
  }
  .img{
    width: 100%;
    height: 50px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .title{
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 8px;
  }
  .description{
    text-align: center;
    .price{
      color: red;
      font-weight: bold;
    }
    .like{
      margin-left: 10px;
    }
  }
}
</style>
